<template>
  <div class="_wz_video" ref="video" :class="{_wz_vidoe_isPhone : isPhone}">
    <video id="videojs-flvjs-player" class="video-js vjs-default-skin vjs-big-play-centered" ref="videoPlayer" playsinline="true"
           x5-playsinline="true"
           webkit-playsinline="true"
           x5-video-orientation="landscape|portrait"
           tabindex="2" mediatype="video"
           style="position: absolute;top: 0px;left: 0px;bottom: 0px;right: 0px;z-index: -1;width: 100%;height: 100%;background: #000;"
    >
    </video>

  </div>
</template>
<script>
import Vue from 'vue'

export default {
  props: ['playerOptions','isPhone'],//接收来自父组件的数据
  data() {
    return {
      player: null,
      openTheVoiceType:false,
      videoAutoplayType:false,
    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    let that = this;
    console.log(this.playerOptions)


    that.initVideo();



  },
  methods: {//执行的方法
    wzPlay(){
      this.player.play();
    },
    initVideo() {
      let that = this;
      let childrenList = [];
      var u = navigator.userAgent;
      var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端


      // childrenList = ['PlayToggle','ProgressControl','RemainingTimeDisplay','muteToggle','VolumeControl','FullscreenToggle']

      if(isiOS){//ios
        // that.playerOptions["sources"][0]["type"] = "application/x-mpegURL";
        if(that.playerOptions["sources"][0]["type"] == "application/x-mpegURL"){
          childrenList = ['PlayToggle','muteToggle','VolumeControl','FullscreenToggle']
        }else{
          childrenList = ['PlayToggle','ProgressControl','RemainingTimeDisplay','muteToggle','VolumeControl','FullscreenToggle']
        }
      }else {//Android
        if(that.playerOptions["sources"][0]["type"] == "application/x-mpegURL"){
          childrenList = ['PlayToggle','muteToggle','VolumeControl','FullscreenToggle']
        }else{
          childrenList = ['PlayToggle','ProgressControl','RemainingTimeDisplay','muteToggle','VolumeControl','FullscreenToggle']
        }
      }



      that.player = that.$video('videojs-flvjs-player', {
        // autoplay: true, // 自动播放
        // muted: true, //设置默认播放音频
        autoplay: false, // 自动播放
        // muted: true, //设置默认播放音频
        controls: true, //是否显示底部控制栏
        width: "100%", //
        height: "100%", //
        //		aspectRatio: "16:9", //视频比例
        notSupportMessage:'视频正处于加载状态，请稍后重试！！',
        loop: false, //是否循环播放
        /*
             *	auto:立即加载视频（如果浏览器支持它）。一些移动设备将不会预加载视频，以保护用户的带宽/数据使用率。这就是为什么这个值被称为“自动”，而不是更确凿的东西
             *	metadata:只加载视频的元数据，其中包括视频的持续时间和尺寸等信息。有时，元数据会通过下载几帧视频来加载。
             *	none:
             */
        preload: "none", //
        poster: that.playerOptions.poster, //开始播放前显示的图像的URL
        fluid: false, // 是否自适应布局
        language: 'zh-CN', //中文
        controlBar: {
          // children: {
          //   PlayToggle: true, //播放 暂停
          //   muteToggle: true, //声音
          //   VolumeControl: true, //声音
          //   ProgressControl: true, //进度控制
          //   RemainingTimeDisplay: true, //重排时间显示
          // }
          children: childrenList
        },
        techOrder: ['html5'],
//        flvjs: {
//          mediaDataSource: {
//            isLive: false,
//            cors: true,
//            withCredentials: false,
//          },
//        },

        // sources: [{
        //   src: 'https://osstest.sumaokeji.com/TTNew/TTliveVideo.mp4',
        //   type: 'video/mp4'
        // }],
        sources: [{
          src: that.playerOptions['sources'][0].src,
          type: that.playerOptions['sources'][0].type
          // src: that.url,
          // type: 'application/x-mpegURL'
        }],
      }, function onPlayerReady() {
        // pullEnUrl
        // meetingId
        return false;
        console.log(that.playerOptions.pullEnUrl)//英文
        console.log(that.playerOptions.pullUrl)//中文
        console.log(that.playerOptions.meetingId)
        console.log(that.playerOptions.meetingId == '2')
        if(that.playerOptions.meetingId == '2'){
          //切换清晰度
          that.videoDataswitch(that.player,that.videoData);
        }
      });

    },
    // 高清 倍速 打点
    videoDataswitch(player,videoData){
      let that = this;

      if(document.getElementsByClassName('_wz_definition_switching').length > 0){
        document.getElementsByClassName('_wz_definition_switching')[0].remove();
      }
      // {dotType:true,name:'NEXT电商出海营销峰会',videoResources:{gq:'https://dinolloss.event.com.cn/next/hd/Keynote.m3u8',bq:'https://dinolloss.event.com.cn/next/sd/Keynote.m3u8',lc:'https://dinolloss.event.com.cn/next/ld/Keynote.m3u8'},img:''},
      //
      // return false;
      let html = '<div class="_wz_definition_switching" style="display: flex;">' +
          '<div class="_wz_video_clarity" style="padding: 0 1em;">' +
          '     <Poptip placement="top" transfer-class-name="_wz_TooltipDisabled" v-model="clarityType">' +
          '        <div>{{videoSelect}}</div>' +
          '        <template #content>' +
          '           <div class="_wz_video_clarityList" :class="{_wz_video_clarity_select : videoSelect == \'中文\'}" @click="videoSwitch(childVideoData.pullUrl,\'中文\')">中文</div>' +
          '           <div class="_wz_video_clarityList" :class="{_wz_video_clarity_select : videoSelect == \'English\'}" @click="videoSwitch(childVideoData.pullEnUrl,\'English\')">English</div>' +
          '        </template>' +
          '    </Poptip>' +
          '</div>'+
          '</div>';

      let MyComponent = Vue.extend({
        template: html,
        data() {
          return {
            videoSelect:'中文',
            clarityType:false,//清晰度
            timesSpeedType:false,//倍速
            childVideoData:{},//子组件
          }
        },
        beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程
          this.childVideoData = that.playerOptions;
        },
        methods: {
          //清晰度
          videoSwitch(data,name){
            let _this = this;
            _this.clarityType = false;
            console.log(data)
            if(name == _this.videoSelect){
              return false;
            }


            _this.videoSelect = name;
            let time = player.currentTime();
            player.src({
              src: data,
              type: that.playerOptions['sources'][0].type
            });

            player.play();
            // let volume = that.player.volume();
            // that.player.volume(0)


          },
        }
      });
      let component = new MyComponent().$mount();
      document.getElementsByClassName('vjs-volume-control')[0].after(component.$el);
    },


  },
  watch: {//监听
    playerOptions:{
      deep:true,//true为进行深度监听,false为不进行深度监听
      handler(newVal){
        console.log(newVal);
        if(!!this.playerOptions['sources'][0].src){
          this.player.src({
            src: this.playerOptions['sources'][0].src,
            type: this.playerOptions['sources'][0].type
          });
          // this.player.play();
        }else{
          this.player.dispose()
          // this.initVideo();
        }
      }
    }
  },

  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态
  },
  destroyed() {//destroyed 销毁完成状态
    this.player.dispose()
    console.log(132123)
  }
}
</script>
<style>
.vjs-poster {
  /*background-image: url("img/") !important;*/
  background-size: 100% 100%;
}
</style>
<style lang="scss">

._wz_video {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;

  .video-js {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .video-js {
    /*transform: rotate(90deg);*/
  }

  #danmu {
    position: absolute;
    top: 0;
    bottom: 36px;
    left: 0;
    right: 0;
    z-index: 99;
    width: 100% !important;
    height: calc(100% - 36px) !important;
  }

  .vjs-big-play-centered .vjs-big-play-button {
    z-index: 101;
    border: 0px;
    border-radius: 50%;
    height: 0.9rem;
    line-height: 0.9rem;
    width: 0.9rem;
    background: rgba(0,0,0,0.5);
    .vjs-icon-placeholder{
      font-size: 0.44rem;
    }
  }
  .vjs-control-bar{
    position: absolute;
    z-index: 15;
  }

  ._wz_video_clarity{
    line-height: 0.3rem;
    cursor: pointer;

  }

  ._wz_TooltipDisabled{
    line-height: 0.3rem;
    min-width: auto!important;
    .ivu-poptip-arrow{
      border-top-color: rgba(0,0,0,0.6)!important;
      cursor:pointer;
    }
    .ivu-poptip-arrow:after{
      border-top-color: rgba(0,0,0,0)!important;
    }
    .ivu-poptip-inner{
      background: rgba(0,0,0,0.6);
      padding: 18px 22px 8px;
      .ivu-poptip-body{
        padding: 0px;
      }
    }
    ._wz_video_clarity_select{
      color: #2d8cf0!important;
    }
    ._wz_video_clarityList{
      line-height: 0.3rem;
      cursor: pointer;
      color: #fff;
    }
  }
}
._wz_vidoe_isPhone{
  ._wz_video_clarity{
    display: flex;
    align-items: center;
  }
  ._wz_video_clarityList{
    line-height: 0.5rem!important;
  }
}

</style>
